<template>
  <div class="_wz_cent_main _wz_staffAdd">
    <Form ref="formAdd" :model="formData" label-position="right" :label-width="100" :rules="ruleValidate">

      <FormItem label="登录账号" prop="username">
        <i-input v-model="formData.username" placeholder="如:wangxiaowu" clearable />
      </FormItem>
      <FormItem label="初始密码" v-if="!formData.uuid">
        <div>Ab@123456</div>
      </FormItem>
      <FormItem label="用户姓名" prop="name">
        <i-input v-model="formData.name" placeholder="如:王小五" clearable />
      </FormItem>
      <FormItem label="电子邮箱" prop="email">
        <i-input v-model="formData.email" placeholder="请填写电子邮箱" clearable />
      </FormItem>
      <FormItem label="联系电话">
        <i-input v-model="formData.mobile" placeholder="请填写联系电话" clearable />
      </FormItem>

<!--      <FormItem label="认证编码" prop="safetyUkey">-->
<!--        <i-input v-model="formData.safetyUkey" placeholder="请输入认证编码" clearable />-->
<!--      </FormItem>-->

      <FormItem label="归属部门" prop="inOrgUuid">
        <Select v-model="formData.inOrgUuid" placeholder="请选择归属部门">
          <Option v-for="item in coreInOrgList" :value="item.uuid" :key="item.uuid">{{ item.inOrgType == 1? item.inOrgName : item.inOrgName + '-生产' }}</Option>
        </Select>
      </FormItem>

      <FormItem label="角色权限" prop="roleIdList">
        <i-select v-model="formData.roleIdList" multiple  placeholder="请选择角色权限" clearable>
          <Option v-for="item in roleList" :value="item.roleId" :key="item.roleId">{{ item.roleName }}</Option>
        </i-select>
      </FormItem>
      <Row>
        <Col span="12">
          <FormItem label="负责人状态" prop="inOrgState">
            <i-switch v-model="formData.inOrgState"  :true-value="1" :false-value="0">
              <template #open><span>是</span></template>
              <template #close><span>否</span></template>
            </i-switch>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="使用状态" prop="status">
            <i-switch v-model="formData.status"  :true-value="1" :false-value="0">
              <template #open><span>开启</span></template>
              <template #close><span>禁用</span></template>
            </i-switch>
          </FormItem>
        </Col>
      </Row>
      <!-- 0 未认证  1  已认证   2 临时-->
      <FormItem label="试用状态" >
        <i-switch v-model="formData.safetyState" :true-value="2" :false-value="0" size="large">
          <template #open> <span>开启</span> </template>
          <template #close> <span>关闭</span> </template>
        </i-switch>
      </FormItem>

<!--      <Divider plain>注意事项</Divider>-->
<!--      <span style="color: red;margin-left: 30px">-->
<!--       注意：系统账号体系中，归属部门只可以绑定管理类部门-->
<!--      </span>-->
      <!--      <FormItem><div style="color: #ed4014;">注：默认密码为“123456”</div></FormItem>-->
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
        <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
      </div>
    </Form>
  </div>
</template>
<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reactive
export default defineComponent({
  name: 'staffAdd',//组件名称
  components: {},//组件引用
  props:['selectData'],
  setup (props,context) {

    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用

    const state = reactive({
      formData:{},//表单数据
      formAdd:ref(), // 列表ref
      coreInOrgList:[], // 部门列表
      roleList:[], // 角色列表
      ruleValidate: {
        username: [
          { required: true, message: '请填写登录账号', trigger: 'blur' },
          {
            validator: (rule, value, callBack) => {
              if (value.length > 5) {
                callBack()
              } else {
                callBack('登录账号最少6位')
              }
            }, trigger: 'blur'
          }
        ],

        name: [{ required: true, message: '请填写用户姓名', trigger: 'blur' },],
        roleIdList: [{ type: "array", required: true, message: "请至少选择一个角色权限", trigger: "change" }],
        mobile: [ { required: true, message: '请输入联系电话', trigger: 'blur' } ],
        deptUuid: [{ required: true,message: '请选择经营企业', trigger: 'blur' }],
        inOrgUuid: [{ required: true,message: '请选择归属部门', trigger: 'blur' }],
      },
    });

    const addSubmit = () => {//新增修改提交
      console.log(state.formData,'123')
        state.formAdd.validate( async (valid) => {
        if (valid) {//正则判断使用
          $ViewUIPlus.Spin.show()
          $axios.post(apiUrl.systemUserSystemUserSaveOrUpdate, state.formData).then(res => {
            $ViewUIPlus.Spin.hide()
            if (!!res) {
              $ViewUIPlus.Message.success('保存成功');
              context.emit("closeFun", true)
            }
          }).catch(err => {
            console.log("失败", err)
          })
        } else {
          $ViewUIPlus.Message.error('请正确填写表单')
        }
      })
    }


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted") coreInOrgCoreInOrgList
      state.formData = props.selectData // 修改


      console.log(state.formData,'state.formData')

      $axios.post(apiUrl.coreInOrgCoreInOrgList,{}).then(res => { //部门
        state.coreInOrgList = res.data.data
      })
      $axios.post(apiUrl.systemRoleSystemRoleList,{}).then(res => { //角色
        state.roleList = res.data.data
      })
    })
    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      addSubmit,
    }
  }
})


</script>
<style lang="less">
</style>
